<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入用户ID" size="small" style="width: 200px;" v-model="query.user_id"></el-input>
            <el-input clearable placeholder="请输入关键词" size="small" style="width: 200px;" v-model="query.keyword"></el-input>
            <el-select v-model="query.status" placeholder="请选择状态">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <!-- <el-select v-model="query.verify_status" placeholder="请选择审核类型">
                <el-option v-for="item in verify_statusList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select> -->

            <el-select v-model="query.type" placeholder="请选择类型">
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <el-select v-model="query.customized_type" placeholder="请选择定制类型">
                <el-option v-for="item in customized_typeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <el-button @click="page = 1; init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="page = 1; init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="secret_id"></el-table-column>
                <el-table-column label="发布人" prop="user_id">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.author" v-if="scope.row.user_id">
                        </UserInfo>
                    </template>
                </el-table-column>
                <el-table-column label="密聊标题" prop="desc"></el-table-column>

                <el-table-column label="密聊传图" prop="images">
                    <template slot-scope="scope">
                        <el-image class="border" style="width: 100px; height: 100px" fit="cover" :src="scope.row.images[0]"
                            :preview-src-list="scope.row.images">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column label="类型" prop="images">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 4">已完成</el-tag>
                        <el-tag v-else-if="scope.row.status == 1" type="success">上架</el-tag>
                        <el-tag v-else-if="scope.row.status == 5"  type="info">取消</el-tag>
                        <el-tag  v-else-if="scope.row.status == 3"  type="warning">进行中</el-tag>
                        <el-tag  v-else-if="scope.row.status == 2"  type="danger">下架</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="浏览量" prop="viewed" width="100px"></el-table-column>



                <el-table-column label="订单号" prop="trade_no"></el-table-column>

                <el-table-column label="审核状态" prop="status" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.verify_status == 0" type="warning">待审核</el-tag>
                        <el-tag v-else-if="scope.row.verify_status == 1" type="success">已通过</el-tag>
                        <el-tag v-else-if="scope.row.verify_status == 2" type="danger">已拒绝</el-tag>

                    </template>
                </el-table-column>
                <el-table-column label="发布时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="flex">
                            <div v-show="scope.row.verify_status == 0">
                                <el-popconfirm @confirm="passFun(scope.row.secret_id, 1)" title="确定要通过吗？">
                                    <el-button size="mini" slot="reference" type="primary"
                                        style="padding: 10px">通过</el-button>
                                </el-popconfirm>

                                <el-popconfirm @confirm="passFun(scope.row.secret_id, 2)" title="确定要拒绝吗？">
                                    <el-button size="mini" slot="reference" type="danger"
                                        style="padding: 10px">拒绝</el-button>
                                </el-popconfirm>
                                <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                                    @click="toDetails(scope.row.secret_id)"
                                    v-permission="['ADMIN', 'SECRET_DETAILS']">详情</el-button>
                            </div>
                            <div v-show="scope.row.verify_status != 0">
                                <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                                    @click="toDetails(scope.row.secret_id)"
                                    v-permission="['ADMIN', 'SECRET_DETAILS']">详情</el-button>
                            </div>
                            <el-popconfirm  v-if="scope.row.status == 1 || scope.row.status == 3" @confirm="reasonShowFun(scope.row.secret_id)" title="这是确定要下架这个订单吗？">
                                <el-button size="mini" slot="reference" style="padding: 10px;margin-left: 10px;"
                                    type="danger">下架</el-button>
                            </el-popconfirm>

                            <!-- <el-popconfirm v-if="scope.row.status == 2" @confirm="grounding(scope.row.secret_id)" title="这是确定要上架这个订单吗？">
                                <el-button size="mini" slot="reference" style="padding: 10px;margin-left: 10px;"
                                    type="success">上架</el-button>
                            </el-popconfirm> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <!-- 下架订单 -->
        <el-dialog :visible.sync="reasonShow" title="下架订单" width="800px">
            <el-form :model="reasonForm">
                <el-form-item label="下架原因">
                    <el-input placeholder="请输入下架原因" style="width: 500px" v-model="reasonForm.reason"
                        type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="reasonShow = false">取 消</el-button>
                <el-button @click="disableFun(2)" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import list from "@/api/bank.json"
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name: "secret-chat-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            submitComplete: false,
            query: {
                user_id: null,
                keyword: '',
                status: '',
                customized_type: '',
                type: '',
                verify_status: ''
            },
            value: '',
            reasonShow: false,
            reasonForm: {
                status: '',
                reason: '',  //理由
            },
            secret_id: "",
            options: [
                {
                    value: 1,
                    label: '上架 '
                }, {
                    value: 2,
                    label: '下架'
                }, {
                    value: 3,
                    label: '进行中'
                },
                {
                    value: 4,
                    label: '已完成'
                },
                {
                    value: 5,
                    label: '取消'
                }
            ],

            typeList: [
                {
                    value: 'one_by_one',
                    label: '密聊 '
                }, {
                    value: 'same_city',
                    label: '同城 '
                }, {
                    value: 'customized',
                    label: '定制'
                }
            ],

            customized_typeList: [
                {
                    value: 1,
                    label: '密聊'
                }, {
                    value: 2,
                    label: '同城 '
                }
            ],

            verify_statusList: [
                {
                    value: 0,
                    label: '待审核'
                }, {
                    value: 1,
                    label: '已取消 '
                }, {
                    value: 2,
                    label: '已拒绝 '
                }
            ],
            visible: false,
            loading: false,
            images: [],
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = "/secret/index"
            this.init() //重新请求数据
            console.log("data", this.data)
        },
        selectFun(val) {
            this.query.bank_name = val
        },

        initReasonForm() {
            this.reasonForm = {
                status: '',
                reason: '',  //理由
            }
        },

        reasonShowFun(id) {
            this.secret_id = id,
                this.reasonShow = true
        },

        //下架
        disableFun(status) {
            this.reasonForm.status = status
            console.log('that.reasonForm)', this.reasonForm, status)
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            this.$request.put('/secret/update_status/' + that.secret_id, that.reasonForm).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                that.reasonShow = false
                that.initReasonForm()
                this.init() //重新请求数据
            }).catch((error) => {
                this.submitComplete = false
            });
        },

          //上架
          grounding(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            this.$request.put('/secret/update_status/' + id, {
                status:1,
                reason:""
            }).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                this.init() //重新请求数据
            }).catch((error) => {
                this.submitComplete = false
            });
        },

        toDetails(id) {
            this.$router.push({ path: "/secret-chat-details/?id=" + id });
        },

        passFun(id, status) {
            let that = this
            this.$request.put('/secret/update_examine', { secret_id: id, verify_status: status }).then((res) => {
                this.$message.success('操作成功')
                this.init() //重新请求数据
            })
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
        },

    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>